<template>
	<view class="">
		<view class="p-3 j-sb" style="padding-bottom:unset;">
			<view class="row j-sb flex-nowrap" >
				<image :src="baseUrl+goodsDetail.img" style="width: 300upx;height: 180upx;"></image>
				<view class="pl-2 " style="width: 450upx;" >
					<view class="font-md" style="color: #333333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
						{{goodsDetail.title}}
					</view>
					<view class="main-text-color font-sm">
						{{goodsDetail.score}}积分
					</view>
					<view class="font-sm">
						原价：{{goodsDetail.f_price}}
					</view>
					<view class="row j-sb a-center">
						<view class="font-sm">
							<text class="">配送方式：</text>
							<text class="">快递</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="px-3 row j-sb a-center" style="height: 133upx;">
				<text>选择数量</text>
				<view class="row text-center" style="height: 58upx;border: 1px solid #f6f6f6;">
					<view class="" @tap="sum" style="width: 50upx;line-height: 58upx;border-right: 1px solid #f6f6f6;">
						-
					</view>
					<view class="" style="width: 70upx;line-height: 58upx;">
						{{num}}
					</view>
					<view class="" @tap="add" style="width: 50upx;line-height: 58upx;border-left: 1px solid #f6f6f6;">
						+
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="main-bg-color-hui p-1"></view>
		<view class="p-3 row j-start a-center" @tap="toAddressList()">
			<image src="../../static/dingwei.png" style="width: 32upx; height: 32upx;"></image>
			<text class="font-md">收货人：{{name}}</text>
			<text class="pl-5">{{phone}}</text>
			<text class="font-sm" style="color:#999999;margin-left:30upx;">收货地址：{{address}}</text>
		</view>
		
		<view class="main-bg-color-hui p-1"></view>
		
		<view class="row j-sa" style="height: 80upx;line-height:80upx;margin-top:20upx;">
			<text @tap="display(1)" :class="{btna:btnnum == 1}">商品详情</text>
			<text @tap="display(2)" :class="{btna:btnnum == 2}">兑换规则</text>
		</view>
		<view class="text-center" style="margin-bottom:95upx;">
			<rich-text class="displaynone" :class="{dis:btnnum == 1}" :nodes="goodsDetail.detail|formatRichText"></rich-text>
			<rich-text class="displaynone" :class="{dis:btnnum == 2}" :nodes="systemSetdata.exchange_rule|formatRichText"></rich-text>
		</view>
		
		<view class="position-fixed bottom-0 row text-center main-bg-color-bai" style="height: 95upx;width: 750upx;">
			<view class="flex-1"  style="line-height: 95upx;">
				总计：<text class="main-text-color">{{money}}积分</text>
			</view>
			<view @click="exchange()" class="flex-1 main-bg-color-cheng main-text-color-bai " style="line-height: 95upx;">
				立即兑换
			</view>
		</view>
		
		<view class="success_bgc position-fixed" :class="[zindex ? 'zindex_dis' : 'zindex_no']">
			<view class="success_window">
				<view class="success_top">
					<image src="../../static/success.png"></image>
					<view>恭喜您，商品兑换成功</view>
				</view>
				<view class="success_buttom">
					<text>我们将在7个工作日内为您寄出商品 请注意查收</text>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import request from '@/common/lib/request.js'
	export default {
		data() {
			return {
				zindex:false,
				baseUrl:request.common.baseUrl,
				btnnum:1,
				num:1,
				goodsDetail:'',
				money:0,
				addressId:0,
				address:'',
				name:'',
				phone:'',
				systemSetdata:''
			}
		},
		onLoad:function(option){
			uni.request({
				url: request.common.baseUrl+'/api/index/systemSet',
				data: {},
				header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
				},
				success: (res) => {
					if(res.data.code==200){
						this.systemSetdata=res.data.data
					}
				}
			});
			uni.request({
				url: request.common.baseUrl+'/api/address/getDefaultAddress',
				data: {
					token:uni.getStorageSync('keyToken')
				},
				header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
				},
				success: (res) => {
					if(res.data.code==200){
						this.addressId=res.data.data.id
						this.address=res.data.data.province+res.data.data.city
						if(res.data.data.district){
							this.address=this.address+res.data.data.district
						}
						this.address=this.address+res.data.data.uaddress
						this.name=res.data.data.uname
						this.phone=res.data.data.uphone
					}else{
						uni.request({
							url: request.common.baseUrl+'/api/address/isAddress',
							data: {
								token:uni.getStorageSync('keyToken')
							},
							header: {
								'Content-Type':'application/json;charset=UTF-8',
								'Content-Type':'application/x-www-form-urlencoded'
							},
							success: (res) => {
								if(res.data.code==200){
									uni.navigateTo({
										url: '/pages/score/address'
									});
								}else{
									uni.navigateTo({
										url: '/pages/member/member'
									});
								}
							}
						})
					}
				}
			});
			uni.request({
				url: request.common.baseUrl+'/api/goods/goodsDetail',
				data: {
					id:option.id
				},
				header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
				},
				success: (res) => {
					if(res.data.code==200){
						this.goodsDetail=res.data.data
						if(uni.getStorageSync('keyDiscount')){
							this.money=this.goodsDetail.score*0.9
							this.money=this.money.toFixed(2)
						}else{
							this.money=this.goodsDetail.score
						}
					}
				}
			});
		},
		methods: {
			exchange(){
				uni.request({
					url: request.common.baseUrl+'/api/goods/goodsOrderin',
					data: {
						token:uni.getStorageSync('keyToken'),
						goods_id:this.goodsDetail.id,
						score:this.goodsDetail.score,
						buy_num:this.num,
						pay_score:this.money,
						address_id:this.addressId,
						name:this.name,
						phone:this.phone,
						address:this.address,
					},
					header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if(res.data.code==200){
							this.zindex=true
						}else{
							uni.showToast({
								title:res.data.msg,
								icon: 'none',
							})
						}
					}
				})
			},
			toAddressList(){
				uni.navigateTo({
					url: '/pages/score/address'
				});
			},
			display(v){
				this.btnnum = v
			},
			sum(){
				if(this.num>1){
					this.num--;
					if(uni.getStorageSync('keyDiscount')){
						this.money=this.num*this.goodsDetail.score*0.9
						this.money=this.money.toFixed(2)
					}else{
						this.money=this.num*this.goodsDetail.score
						this.money=this.money.toFixed(2)
					}
				}
			},
			add(){
				this.num++;
				if(uni.getStorageSync('keyDiscount')){
					this.money=this.num*this.goodsDetail.score*0.9
					this.money=this.money.toFixed(2)
				}else{
					this.money=this.num*this.goodsDetail.score
					this.money=this.money.toFixed(2)
				}
			}
		},
		onShow:function(){
			uni.request({
				url: request.common.baseUrl+'/api/address/getDefaultAddress',
				data: {
					token:uni.getStorageSync('keyToken')
				},
				header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
				},
				success: (res) => {
					if(res.data.code==200){
						this.addressId=res.data.data.id
						this.address=res.data.data.province+res.data.data.city
						if(res.data.data.district){
							this.address=this.address+res.data.data.district
						}
						this.address=this.address+res.data.data.uaddress
						this.name=res.data.data.uname
						this.phone=res.data.data.uphone
					}else{
						uni.request({
							url: request.common.baseUrl+'/api/address/isAddress',
							data: {
								token:uni.getStorageSync('keyToken')
							},
							header: {
								'Content-Type':'application/json;charset=UTF-8',
								'Content-Type':'application/x-www-form-urlencoded'
							},
							success: (res) => {
								if(res.data.code==200){
									uni.navigateTo({
										url: '/pages/score/address'
									});
								}else{
									uni.navigateTo({
										url: '/pages/member/member'
									});
								}
							}
						})
					}
				}
			});
		},
		filters: {
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.去掉img标签里的style、width、height属性
			 * 2.img标签添加style属性：max-width:100%;height:auto
			 * 3.修改所有style里的width属性为max-width:100%
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 */
			formatRichText (html) { //控制小程序中图片大小
			    let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
			        match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
			        match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
			        match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
			        return match;
			    });
			    newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
			        match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
			        return match;
			    });
			    newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			    newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
			    return newContent;
			}	
		}
	}
</script>

<style>
.btna{
	border-bottom: 1upx solid #ff6101;
}
.displaynone{
	display: none;
} 
.dis{
	display: block;
}
.zindex_dis{display:unset;}
.zindex_no{display:none;}
.success_bgc{
	top:0;
	width:100%;
	height:100%;
	background-color:rgb(41,41,41,0.3);
}
.success_window{
	width:600upx;
	height:300upx;
	margin:50% 75upx;
}
.success_top{
	height:150upx;
	background-color:#33cc00;
	display:flex;
	justify-content:center;
	align-items:center;
	color:#FFFFFF;
	border-top-left-radius:15upx;
	border-top-right-radius:15upx;
}
.success_top image{
	width:60upx;
	height:60upx;
}
.success_top view{
	margin-left:20upx;
}
.success_buttom{
	height:150upx;
	background-color:#FFFFFF;
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	border-bottom-left-radius:15upx;
	border-bottom-right-radius:15upx;
}
.success_buttom text{
	width:500upx;
	line-height:40upx;
}
</style>
